<template>
  <basic-container :btnFlag="false">
    <div class="card-border">
      <card-header :header-data="headData"></card-header>
      <!-- 搜索栏 -->
      <form class="el-form el-form--inline avue-crud__search" style="margin: 14px 0px -7px 15px">
        <div class="el-form-item">
          <label class="el-form-item__label">规划名称:</label>
          <div class="el-form-item__content">
            <el-input v-model="plantitle" size="small" placeholder="请输入内容" clearable></el-input>
          </div>
        </div>
        <div class="el-form-item avue-crud__searchMenu">
          <div class="el-form-item__content">
            <el-button class="myBtn" type="primary" icon="el-icon-search" size="mini" @click.stop="searchSubmit()">搜索</el-button>
            <el-button class="myBtn" type="reset" icon="el-icon-delete" size="mini" @click.stop="resetSubmit()">重置</el-button>
          </div>
        </div>
      </form>
      <div style="float: right;margin: 10px 10px 5px 0;">
        <el-button type="warning"
                   size="mini"
                   @click="exportToDoWorkItemData()">导出
        </el-button>
      </div>
      <div>
        <div class="card-body">
          <el-table :data="tableList"
                    style="width: 100%"
                    row-key="id"
                    :row-class-name="tableRowClassName"
                    border
                    default-expand-all
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column align="left"
                             label="名称">
              <template slot-scope="scope">
                <a @click="reportProgressDetail(scope.row,true)"
                   v-if="scope.row.type">{{scope.row.mainTitle}}</a>
                <a @click="subjectOpinionDeletee(scope.row.id,'1')" v-else>{{scope.row.mainTitle}}</a>
              </template>
            </el-table-column>
            <el-table-column align="center"
                             prop="type"
                             width="120"
                             label="类别"
                             :formatter="formatType"></el-table-column>
            <el-table-column align="center"
                             prop="leadDeptName"
                             width="120"
                             label="责任部门"></el-table-column>
            <el-table-column align="center"
                             width="120"
                             label="时间类型">
              <template slot-scope="scope">
                <span>{{scope.row.submitPeriod=='1'?'年报':scope.row.submitPeriod=='2'?'季报':scope.row.submitPeriod=='3'?'月报':''}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center"
                             prop="state"
                             width="120"
                             label="本期状态">
              <template slot-scope="scope">
                <span v-if="scope.row.applyProgress=='0'&&scope.row.isReport=='0'"
                      style="color:red;">未上报</span>
                <span v-if="scope.row.applyProgress=='1'&&scope.row.isReport=='0'"
                      style="color:green;">已上报</span>
                <span v-if="scope.row.isReport=='2'">
                                  已过期</span>
              </template>
            </el-table-column>
            <el-table-column align="center"
                             width="120"
                             v-if="!watch">
              <template slot="header"
                        slot-scope="scope">
                <span>操作</span>
              </template>
              <template slot-scope="scope">
                <div class="menu-title"
                     @click.stop="submit(scope.row)"
                     v-if="scope.row.applyProgress=='0'&&scope.row.isReport=='0'">
                  <i class="iconfont iconalter icon-warning"></i>
                  <p class="menu-title-text">上报</p>
                </div>
                <div class="menu-title"
                     @click.stop="editReport(scope.row)"
                     v-if="scope.row.applyProgress=='1'&&scope.row.timeTypeEditState=='0'&&scope.row.isReport=='0'">
                  <i class="iconfont iconalter icon-warning"></i>
                  <p class="menu-title-text">上报</p>
                </div>
                <div class="menu-title"
                     @click.stop="editReportSubmitPeriodChanged(scope.row)"
                     v-if="scope.row.applyProgress=='1'&&scope.row.timeTypeEditState=='1'&&scope.row.isReport=='0'">
                  <i class="iconfont iconalter icon-warning"></i>
                  <p class="menu-title-text">上报</p>
                </div>
                <div class="menu-title"
                     @click.stop="editReportSubmitPeriodChangedEdit(scope.row)"
                     v-if="scope.row.applyProgress=='1'&&scope.row.timeTypeEditState=='2'&&scope.row.isReport=='0'">
                  <i class="iconfont iconalter icon-warning"></i>
                  <p class="menu-title-text">上报</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :page-sizes="[2,5, 10, 20, 30, 40 ,50]"
                           :current-page="page.currentPage"
                           :page-size="page.pageSize"
                           :total="page.total"
                           layout="total, sizes, prev, pager, next, jumper"
                           class="paginationcss"></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </basic-container>
</template>

<script>
  import {getModelTree, decomposeDraftProgressTree,exportToDoWorkItemDataExcel} from '@/api/pim/pim'

  export default {
    name: 'todoWorkItem',
    created() {
      this.pageputTableData(this.page);
      window.subjectOpinionDeletee = this.subjectOpinionDeletee;
    },
    props: {
      watch: Boolean
    },
    data() {
      return {
        headData: {
          title: this.watch ? '进度信息' : '进度上报'
        },
        tableList: [],
        plantitle: '',
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        }
      }
    },
    methods: {
      formatType(row, column) {
        switch (row.type) {
          case '1':
            return '指标';
          case '2':
            return '任务';
          case '3':
            return '项目'
        }
      },
      putTableData() {
      },
      searchSubmit(){
        this.page.currentPage = 1
        let params = {
          title: this.plantitle
        };
        this.pageputTableData(this.page,params)
      },
      resetSubmit(){
        let params = {
          title: ''
        };
        this.plantitle= '';
        this.pageputTableData(this.page,params)
      },
      pageputTableData(page,params) {
        decomposeDraftProgressTree(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
        },params)).then(response => {
          if (response.data.code == 0) {
            let records = response.data.data.records;
            this.page.total = response.data.data.total;
            this.$emit('getTotal', this.page.total);
            if (this.watch) {
              for (let li of records) {
                let num = 0;
                if (li.children) {
                  for (let i in li.children) {
                    if (li.children[i].isReport == 2) {
                      delete li.children[i];
                      num++
                    }
                  }
                }
                if (li.children.length == num) {
                  delete li.children
                }
              }
              this.tableList = records;
              return
            }
            this.tableList = records
          }
        })
      },
      handleSizeChange(val) {
        let page = this.page;
        page.pageSize = val;
        this.pageputTableData(page)
      },
      handleCurrentChange(val) {
        let page = this.page;
        page.currentPage = val;
        this.pageputTableData(page)
      },
      // 上报进度
      submit(row, watch) {
        let src = `/pim/workingItem/submit`;
        this.$router.push({
          path: src,
          query: {
            itemName:row.itemName,
            id: row.id,
            watch: watch,
            type: row.type,
            startDate: row.startDate,
            endDate: row.endDate,
            submitPeriod: row.submitPeriod,
          }
        })
      },
      // 上报进度(情况2：已上报但是没有更改过时间类型)
      editReport(row, watch) {      //转向页面：editProgress
        let src = `/pim/workingItem/editReport`;
        this.$router.push({
          path: src,
          query: {
            itemName:row.itemName,
            id: row.id,
            watch: watch,
            type: row.type,
            startDate: row.startDate,
            endDate: row.endDate,
            submitPeriod: row.submitPeriod,
          }
        })
      },
      // 上报进度(情况3：已上报更改过时间类型)
      editReportSubmitPeriodChanged(row, watch) {      //转向页面：editProgressPeriodChanged
        let src = `/pim/workingItem/editProgressPeriodChanged`;
        this.$router.push({
          path: src,
          query: {
            itemName:row.itemName,
            id: row.id,
            watch: watch,
            type: row.type,
            startDate: row.startDate,
            endDate: row.endDate,
            submitPeriod: row.submitPeriod,
          }
        })
      },
      // 上报进度(情况4：已上报更改过时间类型并提交过，点击编辑)
      editReportSubmitPeriodChangedEdit(row, watch) {      //转向页面：editProgressPeriodChangedEdit
        let src = `/pim/workingItem/editReportSubmitPeriodChangedEdit`;
        this.$router.push({
          path: src,
          query: {
            itemName:row.itemName,
            id: row.id,
            watch: watch,
            type: row.type,
            startDate: row.startDate,
            endDate: row.endDate,
            submitPeriod: row.submitPeriod,
          }
        })
      },
      // 上报进度(详情页)
      reportProgressDetail(row, watch) {
        let src = `/pim/workingItem/reportProgressDetail`;
        this.$router.push({
          path: src,
          query: {
            itemName:row.itemName,
            id: row.id,
            watch: watch,
            type: row.type,
            startDate: row.startDate,
            endDate: row.endDate,
            submitPeriod: row.submitPeriod,
          }
        })
      },
      subjectOpinionDeletee(id, watch) {
        sessionStorage.setItem('modifyProgram', id);
        let src = '/modifyProgram/detail';
        this.$router.push({
          path: src,
          query: {
            watch: watch,
            draftId: id,
          }
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (row.isReport == undefined) {
          return 'success-row'
        }
        return ''
      },
      exportToDoWorkItemData(){
        this.$confirm("确定要导出进度上报列表吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          exportToDoWorkItemDataExcel().then(response => {
            let exportFileName = "进度上报列表.xlsx";
            this.download(response.data, exportFileName)
          });
        })
      },
      // 下载文件
      download(data, filename) {
        if (data == null) {

        } else {
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', filename);
          document.body.appendChild(link);
          link.click()
        }
      },

    }
  }
</script>

<style lang="scss" scoped>
  /deep/.el-table .success-row .is-left .cell {
    text-decoration: none!important;
    cursor: pointer;
  }
  .el-table__row--level-1 .is-left a {
    cursor: pointer;
  }

  .card-body {
    padding: 10px;
    min-height: 400px;
    padding-bottom: 64px;
  }

  .paginationcss {
    margin-top: 20px;
    float: right;
    margin-right: 28px;
  }
  .myBtn{
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 3px;
  }
</style>

